<%--
  Created by IntelliJ IDEA.
  User: BluceYoung
  Date: 2020/12/11
  Time: 11:24
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<jsp:include page="../temp/index_head.jsp">
    <jsp:param name="title" value="创建社团"/>
    <jsp:param name="needCropper" value="true"/>
</jsp:include>
<div class="col-md-12 col-sm-12 col-xs-12">
    <div class="x_panel">
        <div class="x_title">
            <h2><c:if test="${empty club or empty club.id}">创建</c:if><c:if test="${not empty club and not empty club.id}">修改</c:if>社团 <small>different form elements</small></h2>
            <div class="clearfix"></div>
        </div>
        <div class="x_content">
            <br>
            <form  action="${pageContext.request.contextPath}/club/<c:if test="${empty club or empty club.id}">add</c:if><c:if test="${not empty club and not empty club.id}">edit</c:if>.html" method="post" id="myform"  class="form-horizontal form-label-left" >

                <div class="form-group">
                    <label class="control-label col-md-3 col-sm-3 col-xs-12" for="name">社团名称 <span class="required">*</span>
                    </label>
                    <div class="col-md-6 col-sm-6 col-xs-12">
                        <%--如果是修改，加id隐藏域--%>
                        <c:if test="${not empty club and not empty club.id}">
                            <input type="hidden" name="id" value="${club.id}" />
                        </c:if>
                        <input type="text" id="name" value="${club.name}" name="name" required="required" class="form-control col-md-7 col-xs-12">
                        <input type="hidden" name="userId" value="${user.id}" />
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-md-3 col-sm-3 col-xs-12" >社团分类 <span class="required">*</span>
                    </label>
                    <div class="col-md-6 col-sm-6 col-xs-12">
                        <select id="heard" name="clubType.id" class="form-control" required="">
                            <c:forEach items="${types}" var="type">
                            <option <c:if test="${not empty club and type.id eq club.clubType.id}">selected</c:if> value="${type.id}">${type.name}</option>
                            </c:forEach>
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-md-3 col-sm-3 col-xs-12" >社团logo <span class="required">*</span>
                    </label>
                    <div class="col-md-6 col-sm-6 col-xs-12">
                       <button type="button" class="btn btn-success" onclick="uploadLogo()">上传logo</button>
                        <%--用于存储裁剪后的图片字符串数据--%>
                        <input type="hidden" name="imgData" id="imgData" />
                    </div>
                </div>

                <div class="form-group">
                    <label class="control-label col-md-3 col-sm-3 col-xs-12" for="introduce">简介 <span class="required">*</span>
                    </label>
                    <div class="col-md-6 col-sm-6 col-xs-12">
                        <textarea id="introduce" name="introduce" class="form-control col-md-7 col-xs-12" required>${club.introduce}</textarea>
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-md-3 col-sm-3 col-xs-12" for="slogan">口号
                    </label>
                    <div class="col-md-6 col-sm-6 col-xs-12">
                        <textarea id="slogan" name="slogan" class="form-control col-md-7 col-xs-12">${club.slogan}</textarea>
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-md-3 col-sm-3 col-xs-12" for="purpose">理念
                    </label>
                    <div class="col-md-6 col-sm-6 col-xs-12">
                        <textarea id="purpose" name="purpose" class="form-control col-md-7 col-xs-12">${club.purpose}</textarea>
                    </div>
                </div>
                <div class="form-group">
                    <label for="groupCode" class="control-label col-md-3 col-sm-3 col-xs-12">QQ群号</label>
                    <div class="col-md-6 col-sm-6 col-xs-12">
                        <input id="groupCode" value="${club.groupCode}"  maxlength="11" class="form-control col-md-7 col-xs-12" type="text" name="groupCode">
                    </div>
                </div>
                <div class="ln_solid"></div>
                <div class="form-group">
                    <div class="col-md-6 col-sm-6 col-xs-12 col-sm-offset-3 col-md-offset-3">
                        <button type="submit" class="btn btn-primary">保存</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
<jsp:include page="../temp/index_foot.jsp">
    <jsp:param name="needAlert" value="true"/>
    <jsp:param name="needCropper" value="true"/>
</jsp:include>
<script type="text/javascript">
    $(document).ready(function(){
        $("#myform").submit(function () {
            if($("#imgData").val().length==0){
                Swal.fire(
                    '选择图片',
                    '请选择社团logo',
                    'error'
                )
                return false;
            }
            return true;
        })
    })
    var msg="${msg}";
    if(msg.length>0){
        alert(msg);
        if(msg.indexOf("成功")>=0){
            window.location="${pageContext.request.contextPath}/club/info/"
        }
    }

    function uploadLogo(){
        Swal.fire({
            title: '上传社团logo',
            width: 800,
            allowOutsideClick:false,
            showConfirmButton: false,
            html:`<input type="file" id="fileHead" onchange="show(this)" />
            <button type="button" class="btn btn-default" onclick="$('#imgTeset').cropper('setDragMode','move')">移动</button>
            <button type="button" class="btn btn-default" onclick="horizontal()">水平翻转</button>
            <button type="button" class="btn btn-default" onclick="vertical()">垂直翻转</button>
            <button type="button" class="btn btn-success" onclick="cut()">裁剪</button>
            <div style="width: 600px;height: 600px;">
            <img id="imgTeset" src="">
            </div>`
        })
    }

    function show(a){
        var $file = $(a);
        var fileObj = $file[0];
        var windowURL = window.URL || window.webkitURL;
        var dataURL = null;
        if (!fileObj || !fileObj.files || !fileObj.files[0]){//没有选择图片
            return;
        }
        dataURL = windowURL.createObjectURL(fileObj.files[0]);
        $("#imgTeset").attr('src', dataURL);
        $('#imgTeset').cropper({
            aspectRatio: 1 / 1,//长款1比1的比例
            viewMode: 1
        });
        $("#imgTeset").cropper('replace', dataURL);
    }
    var currentHorizontal=1;
    var currentVertical=1;
    //水平翻转
    function horizontal(){
        currentHorizontal*=-1;
        $('#imgTeset').cropper('scaleX',currentHorizontal);
    }
    //垂直翻转
    function vertical(){
        currentVertical*=-1;
        $('#imgTeset').cropper('scaleY',currentVertical);
    }

    function cut(){
        var size={width:220,height:220};//要裁剪成的图像大小
        var cas = $('#imgTeset').cropper('getCroppedCanvas',size);
        if(cas == null || cas.tagName==null){
            // Swal.fire(
            //     '选择图片',
            //     '请选择图片',
            //     'error'
            // )
            alert("请选择图片")
        }else{
            var base64url = cas.toDataURL('image/jpeg');//转换成图片格式
            $("#imgData").val(base64url);
            Swal.close()
        }
    }

</script>
